<template>
<div class="footer-container">
<!--  我是footer-->
  <div class="footer-logo">
    <p class="flower-logo" style="background-image: url('https://cdn.jsdelivr.net/gh/LIlGG/cdn@1.0.1/img/Sakura/images/sakura.svg')"></p>
    <div class="link1">
      <p><a href="https://www.baidu.com">百度链接</a></p>
      <p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%D0%D4%B8%D0%C3%C0%C5%AE&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=111111">
        lsp链接
      </a></p>
    </div>
  </div>
  <div class="us">
    <p style="font-family: 'Ubuntu', sans-serif;">
      <span>
        Powered@by <a href="http://www.4399.com" title="4399小游戏">hyh</a>•Crafted with@by <a href="http://www.7k7k.com" title="7k7k小游戏">zyw</a>
      </span>
    </p>
    <p>© 2020 Wang Wang sui bing bing</p>
  </div>
</div>
</template>

<script>
export default {
// name: "footer"
}
</script>

<style scoped lang="scss">
.footer-container {
  margin-top: 50px;
  font-size: 50px;
  position: relative;
  left: 50%;
  transform: translate(-50%,0);
  text-align: center;

  .footer-logo {

    .flower-logo {
    width: 30px;
    height: 30px;
    //opacity: .3;
    margin: 0 auto;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: poi-deg 1s infinite linear;
    -webkit-animation: poi-deg 1s infinite alternate-reverse;
    }
    .link1 p{
      margin: 10px 0;
      font-size: 20px;
    }
  }
  .us {
    a:hover {
      color: yellow;
    }
    p {
      font-size: 13px;
      color: #b9b9b9;
      a {
        color: #b9b9b9;
      }
    }
  }
}
@keyframes poi-deg {
  from{transform: rotate(0deg) translate(10px,10px)}
  to{transform: rotate(360deg) translate(-10px,-10px)}
}
</style>